import React from 'react';
import {connect} from 'react-redux';
import {safeAuto,LocalParam,goBack} from "../../../assets/js/utils";
import HeadNavComponent from "../../../components/headNav";
import {Modal, Picker, Toast} from 'antd-mobile';
import {province} from '../../../assets/province/province';
import request from '../../../assets/js/utils/request';
import Css from '../../../assets/css/home/address/index.css';
class addressMod extends React.Component{
    constructor(props){
        super(props);
        safeAuto(props);
        this.state={
            sProvinceValue:'',
            sProvince:'',
            sCity:'',
            sArea:'',
            sName:'',
            sCellphone:'',
            sAddress:'',
            bChecked:false
        }
        this.aid=LocalParam(this.props.location.search).search.aid;
    }
    componentDidMount(){
        this.getAddress()
    }
    //解决内存泄漏
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    //获取收货人姓名
    changeName(e){
        this.setState({sName:e.target.value})
    }
    //获取收货人手机号
    changeCellphone(e){
        this.setState({sCellphone:e.target.value})
    }
    //获取收货人详细地址
    changeAddress(e){
        this.setState({sAddress:e.target.value})
    }
    //改变是否默认地址
    changeChecked(){
        this.setState({bChecked:!this.state.bChecked})
    }
    //获取收获地址
    getAddress(){
        let sUrl=window.base.config.baseUrl+"user/address/info?uid="+this.props.state.redLogin.uid+"&aid="+this.aid+"&token="+window.base.config.token;
        request(sUrl,'get').then((res)=>{
           this.setState({
               sName:res.data.name,
               sCellphone:res.data.cellphone,
               sProvince:res.data.province,
               sCity:res.data.city,
               sAddress:res.data.address,
               sProvinceValue:`${res.data.province} ${res.data.city} ${res.data.address}`,
               bChecked:res.data.isdefault==="1"?true:false
           })
        })
    }
    //点击提交
    submit(){
        if(this.state.sName.match(/^\s*$/)){
            Toast.info('请输入收货人姓名',2);
            return false;
        }
        if(this.state.sCellphone.match(/^\s*$/)){
            Toast.info('请输入收货人手机号',2);
            return false;
        }
        if(!this.state.sCellphone.match(/^1[0-9][0-9]{9}/)) {
            Toast.info('请输入正确的手机号',2);
            return false;
        }
        if(this.state.sProvinceValue.match(/^\s*$/)){
            Toast.info('请选择收货地址',2);
            return false;
        }
        if(this.state.sAddress.match(/^\s*$/)) {
            Toast.info('请输入详细地址',2);
            return false;
        }

        let data={
            aid:this.aid,
            uid:this.props.state.redLogin.uid,
            name:this.props.state.redLogin.username,
            cellphone:this.state.sCellphone,
            province:this.state.sProvince,
            city:this.state.sCity,
            area:this.state.sArea,
            address:this.state.sAddress,
            isdefault:this.state.bChecked?'1':'0',
            props:this.props
        }
        let sUrl=window.base.config.baseUrl+'user/address/mod?token='+window.base.config.token;
        request(sUrl,'post',data).then((res)=>{
            if(res.code===200){
                if (this.state.bChecked){
                    localStorage['aid']=this.aid;
                    sessionStorage.removeItem('aid')
                }else {
                    localStorage.removeItem('aid')
                }
                Toast.info('修改成功',2 ,()=>{
                    goBack(this.props)
                })
            }
        })
    }
    delectAddress(){
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确定', onPress: () =>{
                    //删除地址
                    let sUrl=window.base.config.baseUrl+'user/address/del?uid='+this.props.state.redLogin.uid+'&aid='+this.aid+'&token='+window.base.config.token;
                    request(sUrl,'get').then((res)=>{
                        if (this.aid === sessionStorage['aid']){
                            sessionStorage.removeItem("aid");
                        }
                        if (this.aid === localStorage['aid']){
                            localStorage.removeItem("aid");
                        }
                        Toast.info(res.data,2,()=>{
                            goBack(this.props)
                        })
                    })
                }
            },

        ]);
    }
    render(){
        return(
            <div className={Css['main']}>
                <HeadNavComponent title={'修改收货地址'}  headBtn={'删除'} onClick={this.delectAddress.bind(this)}></HeadNavComponent>
                <div className={Css['group']}>
                    <div className={Css['row']}>收货人</div>
                    <div className={Css['column']}><input type='text' placeholder='收货人姓名' value={this.state.sName} onChange={this.changeName.bind(this)}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>联系方式</div>
                    <div className={Css['column']}><input type='text' placeholder='联系人手机号' value={this.state.sCellphone} onChange={this.changeCellphone.bind(this)}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>所在地区</div>
                    <Picker extra="请选择(可选)" data={province} title="选择地址"
                            onOk={e => {
                                this.setState({sProvinceValue:e.join(' '),sProvince:e[0],sCity:e[1],sArea:e[2]!==undefined?e[2]:''})
                            }}
                    >
                        <div className={Css['column']}><input type='text' placeholder='请选择收货地址' readOnly value={this.state.sProvinceValue}/></div>
                    </Picker>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>详细地址</div>
                    <div className={Css['column']}><input type='text' placeholder='街道详细地址' onChange={this.changeAddress.bind(this)} value={this.state.sAddress}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['row']}>设置为默认地址</div>
                    <div className={Css['column']}><input type='checkbox' checked={this.state.bChecked} onChange={this.changeChecked.bind(this)}/></div>
                </div>
                <div className={Css['group']}>
                    <div className={Css['subim']} onClick={this.submit.bind(this)}>保存</div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(addressMod)